<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>HTML5和CSS3实现的自定义3D滑杆控件DEMO演示</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

  <h1>Scalable <b>3D</b> Range Sliders</h1>

<main class="perspective" id="first-bar">
  <section class="bar">
    <div class="bar-face back percentage"></div>
    <div class="bar-face floor percentage"></div>
    <div class="bar-face roof percentage"></div>
    <div class="bar-face front percentage"></div>
  </section>
  <input class="bar-input" type="range" min="0" max="101" value="64" />
</main>
<p>Simple Range</p>


<main class="perspective" id="second-bar">
<section class="bar">
    <div class="bar-face back percentage"></div>
    <div class="bar-face floor percentage"></div>
    <div class="bar-face roof percentage"></div>
    <div class="bar-face front percentage"></div>
  </section>
<input class="bar-input" type="range" min="0" max="101" value="37" />
</main>
<p>Patterned Range</p>


<main class="perspective" id="third-bar">
<section class="bar">
    <div class="bar-face back percentage"></div>
    <div class="bar-face floor percentage"></div>
    <div class="bar-face roof percentage"></div>
    <div class="bar-face front percentage"></div>
     <div class="indicator">89%</div>
  </section>
<input class="bar-input" type="range" min="0" max="100" value="89" />
</main>
<p class="third-bar-p">Gradient Range with Indicator</p>
  
  

    <script  src="js/index.js"></script>




</body>

</html>
